Jump to content

Работы на конкурс «Задание по CSS»

mrnobody

By mrnobody,
in Contests

 Share

Recommended Posts

mrnobody Explorer

mrnobody

Posted
Posted (edited)

Радиоволны

Задача:

С помощью HTML и CSS-анимации (@keyframes) создать радиоволны, идущие от антенны на 300px (600px/2) c интервалом в 2 секунды.

 

HTML-код:

<div class="radio-wave"></div><div class="radio-wave"></div><div class="radio-wave"></div><div class="antenna">  <div class="antenna-point"></div></div>

Радиоволна:

  • Максимальный диаметр волны 600px;
  • Распространение волны 6 секунд;
  • Интервал между волнами 2 секунды;
  • Цвет фона радиоволны #b7e7f7 (можно задать цвет по своему усмотрению);
  • К концу анимации волна затухает (постепенно исчезает).

Антенна:

  • Ширина антенны 4px, цвет фона #8d8d8d (можно задать цвет по своему усмотрению);
  • Диаметр наконечника 24px, цвет фона #5E5E5E с белым бликом 5×5px (блик по желанию).

Поддержка браузерами:

  • В современных браузерах Firefox, Chrome, Opera 12+.
  • Должно корректно отображаться в IE10;

Решение:

GIF анимация:

http://img268.imageshack.us/img268/7871/uy6.gif

 

Время

Задача:

  • Основная —  используя CSS-анимацию, сделать мигающий разделитель (двоеточие);
  • Второстепенная — сделать свечение цифр и разделителя;
  • Цвет, размер и время можете задать на ваше усмотрение.

HTML-код:

<div class="time">13<span>:</span>47</div> 

Выберите один из вариантов подключения шрифта (Quantico):

Поддержка браузерами:

  • В современных браузерах Firefox, Chrome, Opera 12+.
  • Должно корректно отображаться в IE10;

Решение:

GIF анимация:

http://img163.imageshack.us/img163/4030/argr.gif

 

Часы

Задача:

Сделать простые часы с идущими стрелками используя HTML-разметку (расположенную ниже) и CSS-анимацию. Для наглядности можно увеличить скорость движения стрелки (как сделано в примере).

Диаметр часов 300px, размеры стрелок и шрифта на ваш вкус

HTML-код:

<div class="clock">  <span class="time time-top">12</span>  <span class="time time-right">3</span>  <span class="time time-bottom">6</span>  <span class="time time-left">9</span>  <div class="hand hand-hours"></div>  <div class="hand hand-minutes"></div>  <div class="hand hand-seconds"></div></div>

Поддержка браузерами:

  • В современных браузерах Firefox, Chrome, Opera 12+.
  • Должно корректно отображаться в IE10;

Решение:

GIF анимация:

http://img7.imageshack.us/img7/6240/a0m7.gif

Edited by mrnobody
  • Like 3
Link to comment
Share on other sites
iKNG Explorer

iKNG

Posted
Posted (edited)

Стильная кнопка
 

Текст со скриншотами:

Требуется создать кнопку (рис. 1). 1 - обычный вид кнопки; 2 - при наведении курсора. Так же необходимо, чтобы она отображалась одинаково и на теге a, и на теге input.
 
1bc96cd7eeea1a0ef080caf41d205421.png
Рис. 1
 
Исходный код:


<!DOCTYPE html><html>  <head>    <title>Кнопка</title>    <style type="text/css">    </style>  </head>  <body>    <a class="button">Ссылка</a>    <input type="submit" class="button" value="Input">  </body></html>

Разрешено изменять только содержимое тега style. При том запрещено использовать изображения.

 

Решение:

http://jsfiddle.net/iKNG/2vRsf/1/

http://jsfiddle.net/iKNG/2vRsf/embedded/result/

.button {    padding: 5px;    margin: 15px;    box-sizing: border-box;    -moz-box-sizing: border-box;    box-shadow: inset 0 0 2px 1px #FFFFFF;    background: -moz-linear-gradient(top, #FFFFFF 0%, #F2F2F2 50%, #DDDDDD 51%, #FFFFFF 100%);    background: -webkit-linear-gradient(top, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: -o-linear-gradient(top, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: linear-gradient(top, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    border: 1px solid #F2F2F2;    border-radius: 3px;    color: #000000;    font-family: Verdana, sans-serif;    font-size: 12px;    font-weight: 100;}.button:hover {    background: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 50%, #DDDDDD 51%, #FFFFFF 100%);    background: -webkit-linear-gradient(bottom, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: -o-linear-gradient(bottom, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: linear-gradient(bottom, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);}
Edited by iKNG
Link to comment
Share on other sites
Vlad Explorer

Vlad

Posted
Posted

Здесь публикуются задачи для мини-конкурса Задание по CSS. Каждое задание должно содержать:

  • условия задачи, включая все необходимые скриншоты, требования по браузерам и др. Условия устанавливает сам автор.
  • решение задачи с необходимыми комментариями в сложных, по мнению автора, местах.

Приём работ завершается 28 ноября в 10:00 UTC (13 часов Киева, Минска; 14 Москвы; 16 Екатеринбурга; 17 Омска; 18 Красноярска; 19 Иркутска; 20 Якутска).

Link to comment
Share on other sites
Bassline Explorer

Bassline

Posted
Posted

Вращающаяся рамка

 

Задание:

Сделать для изображения рамку в форме круга, которая будет вращаться при наведении курсора мыши.

x5yVWffc.jpg

 

HTML:

<a href="#" class="circle">    <img src="picture.jpg" alt=""></a>

CSS:

С помощью псевдоэлемента :after, свойства animation и правила @keyframes.

 

Браузеры:

Последние версии Firefox, Chrome(Opera) и IE10+

 

Решение:

http://jsfiddle.net/96PfL/10/embedded/result/

http://jsfiddle.net/96PfL/10/

 

  • Like 2
Link to comment
Share on other sites
Vezha Explorer

Vezha

Posted
Posted (edited)

Резиновые "ok" и "del" в рамочке на CSS3

Задача:

  • написать css для отображения вот таких кнопочек
  • использовать приведённый ниже html шаблон
  • независимость кода от размеров в css(.ok, .del{width:20px;height:20px;} или .ok, .del{width:300px;height:300px;})

okdel.jpg

HTML-код:

<a href="/" class="ok">	<i class="ok1"></i>	<i class="ok2"></i></a><a href="/" class="del">	<i class="del1"></i>	<i class="del2"></i></a>

Решение:

http://jsfiddle.net/Vezha/nP7kK/

 

 

Весёлая таблица

Дано:

Таблица:

table1.jpg

HTML-код:

В коде есть подсказки:
<!-- +2 column --> так обозначены строки дублируя которые модно увеличить число столбцов в таблице

<!-- +2 row --> <!-- +2 row end--> дублируя эту часть можно увеличить число строк

<table><tr><td rowspan="2">Vezha<br />#ddd</td><td rowspan="4"></td><td colspan="2">1   #ddd</td>		<td rowspan="2"></td><td colspan="2">2</td><td rowspan="4"></td><td colspan="2">3</td><!-- +2 column --><td rowspan="2"></td><td colspan="2">9   #eee</td><td rowspan="4"></td></tr><tr><td>1a</td><td>1b</td>		<td>2a</td><td>2b</td><td>3a</td><td>3b</td><!-- +2 column --><td>9a</td><td>9b</td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td><!-- +2 column --></tr><tr><td>A   #999</td><td>A1</td><td>A1</td>		<td rowspan="3"></td><td>A2</td><td>A2</td><td>A3</td><td>A3</td><!-- +2 column --><td rowspan="3"></td><td>A9</td><td>#aaa</td></tr>    		<!-- +2 row --><tr><td colspan="4"></td>		<td colspan="5"></td><!-- +2 column --><td colspan="3"></td></tr><tr><td>B</td><td rowspan="3"></td><td>B1</td><td>B1</td>		<td>B2</td><td>B2</td><td rowspan="3"></td><td>B3</td><td>B3</td><!-- +2 column --><td>B9</td><td>B9</td><td rowspan="3"></td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td><!-- +2 column --></tr><tr><td>C</td><td>C1</td><td>C1</td>		<td rowspan="3"></td><td>C2</td><td>C2</td><td>C3</td><td>C3</td><!-- +2 column --><td rowspan="3"></td><td>C9</td><td>C9</td></tr>    		<!-- +2 row end-->    <tr><td colspan="4"></td>		<td colspan="5"></td><!-- +2 column --><td colspan="3"></td></tr><tr><td>Z   #ccc</td><td rowspan="2"></td><td>Z1</td><td>Z1</td>		<td>Z2</td><td>Z2</td><td rowspan="2"></td><td>Z3</td><td>Z3</td><!-- +2 column --><td>Z9</td><td>#ddd</td><td rowspan="2"></td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td><!-- +2 column --></tr></table>

Задача:

 

table3.jpg 9 - это чётная колонка в данном примене

Детали задачи:

Стилизировать таблицу следующим образом:
#efe горизонтальная разделительная линия

#eef вертикальная разделительная линия

#999 не чётная строка не чётная колонка

#aaa не чётная строка чётная колонка

#bbb рамка (border)

#ccc чётная строка не чётная колонка

#ddd чётная строка чётная колонка и заглавие не чётной колонки

#eee заглавие чётной колонки

 

 

Решение:

http://jsfiddle.net/Vezha/nP7kK/

 

Edited by Vezha
Link to comment
Share on other sites
terorama Explorer

terorama

Posted
Posted (edited)

@terorama, мне кажется, что многие из твоих задач далеки то практики вёрстки. Выдумщик однако.

И кстати - куча постов как-то не очень смотрится, может сгрупируешь ?

 

Я просто, изучая CSS, сталкиваюсь с разными нюансами верстки,

чтобы лучше разобраться - придумываю какой-нибудь пример, связанный с одним конкретным нюансом.

Здесь задачи, придуманные по такому принципу. Да, Ок, сгруппирую.

Не удается все запихнуть в один пост - пишет недопустимое число изображений

И как удалить предыдущие сообщения?

Edited by terorama
Link to comment
Share on other sites
terorama Explorer

terorama

Posted
Posted

Галстук

 

Задание:

Дана следующая html - разметка

 <div class="a">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>      <div class="a">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>
На основании нее нужно создать такую фигуру:

 

BZh1zjiCMAApm2O.png

Решение:

 

http://jsbin.com/UmedOlI/3/edit

Раскрашенное поле

Задание:

создать такое поле

 

BZlTHvzCcAA7oQa.png

 

Решение:

 

http://jsbin.com/edOzuquc/6/edit

Крестики-нолики

Задание:

 

Дана разметка:

<div class="container">  <div class="a">    <div class="b">    </div>  </div>  <div class="a">     <div class="b">    </div>  </div>      <div class="a">     <div class="b">    </div>  </div>      <div class="a">     <div class="b">    </div>  </div>  </div>
нужно создать такую фигуру:

 

BZlQtSYCMAAZWQf.png

 

Решение:

 

http://jsbin.com/OsAcUd/2/edit

Перевернутая таблица

Задание:

 

Дана таблица

 <table>   <tr><th>A</th><th>B</th><th>C</th></tr>   <tr><td>1</td><td>2</td><td>3</td></tr>   <tr><td>1</td><td>2</td><td>3</td></tr>    </table>
Нужно оформить ее следующим образом

 

BZldN92CAAA-THz.png

Решение:

 

http://jsbin.com/oJAWEGa/2/edit

Списки

Задание:

Даны вложенные списки

<ul>    <li> 1     <ol><li>1.1</li>        <li>1.2</li>        <li>1.3</li>        <li>1.4</li>      </ol>    </li>        <li>2    <ol><li>2.1</li>        <li>2.2</li>        <li>2.3</li>        <li>2.4</li>      </ol>    </li>        <li>3      <ol><li>3.1</li>        <li>3.2</li>        <li>3.3</li>        <li>3.4</li>      </ol>    </li>        <li>4    <ol><li>4.1</li>        <li>4.2</li>        <li>4.3</li>        <li>4.4</li>      </ol>    </li>         </ul>

 

Нужно оформить их следующим образом:

 

BZlxAwGCQAAaBH1.png

 

Решение:

 

http://jsbin.com/epAxiwe/4/edit

Снеговик

Задание:

Даны три вложенных блока

<div><div><div></div></div></div>
Нужно изобразить с их помощью снеговика

 

BZmBEVyCAAALm6v.png

 

Решение:

 

http://jsbin.com/utaxONO/4/edit

Форма входа

Задание:

Дана форма

<form action="" method="post">        <fieldset>            <label for="uname"> username</label>      <input type="text" name="username" id="uname" placeholder="username" required />      <label for="passw"> password</label>      <input type="password" name="password" id="passw" required />            <button>login</button>      <span class="twitter">login via twitter</span>      <span class="fb">login via facebook</span>    </fieldset>  </form>

 

Нужно оформить ее таким образом

 

BZmfBw1CUAAtscR.png

Социальные иконки:  http://htmlbook.ru/files/social_icons.png

 

Решение:

 

http://jsbin.com/UVUzugu/1/edit

Выравнивание блоков

Задание:

 

С помощью разметки

<div class="a">        <div></div>    <div></div>    <div></div>    <div></div>    <div></div>        <div></div>       <div></div>    <div></div>    <div></div>    <div></div>    </div>
нужно изобразить такую фигуру

 

BZoBLVRCUAA2AQQ.png

 

Решение

 

http://jsbin.com/aGuwoMen/1/edit

Цветок

Задание:

 

С помощью 6 вложенных блоков

<div><div><div>      <div><div><div>      </div></div></div>  </div></div></div>
изобразить цветок

 

BZoH4OxCcAA0jPr.png

 

Решение

 

http://jsbin.com/AkocOWU/1/edit

Диагональный текст

Задание:

 

Дана разметка

<div>      <span class="red">red fox chasing</span>     <span class="white">the white rabbit</span>      <span class="red">red mushrooms grow</span>     <span class="white">in the white snow</span>      <span class="red">red fox chasing</span>       <span class="white">the white rabbit</span>   <span class="red">red mushrooms grow</span>   <span class="white">in the white snow</span>   </div>

 

Нужно выстроить текст в блоках по диагонали

 

BZodpX6CMAA1K4P.png

 

Решение

 

http://jsbin.com/IJiwoJoP/1/edit

  • Like 1
Link to comment
Share on other sites
terorama Explorer

terorama

Posted
Posted (edited)
Спираль

 


Задание:

Изобразить спираль

 

BZrV_IACMAMxoeo.png

 

Решение  

 


 


 

3D- трансформации

 


Задание:

Дана разметка




<div class="a">

    <div class="red">

      red

    </div>

    

    <div class="orange">

      orange

    </div>

    

    <div class="yellow">

      yellow

    </div>

    

    <div class="green">

      green

    </div>

  </div>


Используя 3D - трансформации  оформить ее в виде такого изображения

 

BZrof7dCcAEns-V.png

 

Решение

 


 


 

Креативный div

 


Задание:

Дан один элемент div




<div></div>


Нужно оформить его таким образом

 

BZrwQtdCcAAmPnw.png

 

символ коня  ♘

 

Решение

 



 

Аккордеон

 


Задание:

Создать аккордеон с переключающимися вкладками  без использования JavaScript

 

BZsf2p0CUAAx_wA.png

 

Решение 

 


 

(Для переключения вкладок используются скрытые чекбоксы. Подробнее про чекбокс-хак 

 

здесь

 

http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/ )


 

Вложенные блоки

 


Задание:

 

Даны 5 вложенных блоков с текстом





 <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

    <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  </div></div></div></div></div>



 

Нужно оформить их таким образом

 

BZwIS-8CYAAWrZF.png

 

Решение

 


 


 

 

Повернутый заголовок

 


Задание:

 

На основании следующей разметки




 <header>

    <h1>Blog name</h1>

    <h2>blog description</h2>

    

    <h3>Tel: 7-777-77-77</h3>

    <h4><span>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit 

 

Amet</span></h4>

  </header>


нужно изобразить такой заголовок

 

BZrPeHoCUAAR-7s.png

 

Решение

 



Edited by terorama
  • Like 1
Link to comment
Share on other sites
terorama Explorer

terorama

Posted
Posted (edited)

Выравнивание блоков в контейнере

Задание:

Контейнер размером 300px X 300px содержит 9 блоков произвольной высоты и ширины.

Высота и ширина внутренних блоков не превышает 100px.

Необходимо расположить блоки в 3 ряда и выровнять следующим образом.

1) По вертикали - по средней линии, соответственно 50px для 1-го ряда, 150px для 2-го и 250 для 3-го

2) По горизонтали - justify - то-есть левый и правый элементы упираются в края контейнера,

промежутки между элементами одинаковые

(Для решения можно использовать любую вспомогательную разметку)

 

BZw9_KACEAAQIs_.png

 

Решение

 

http://jsbin.com/eBAjIZABI/1/edit

 

 

2 Вариант задачи.

 

Все условия аналогичны предыдущей задаче, за исключением горизонтального выравнивания блоков.

 

Блоки нужно выровнять по сетке:

 

1) По вертикали - по средней линии, соответственно 50px для 1-го ряда, 150px для 2-го и 250 для 3-го

2) По горизонтали - по средней линии соответственно 50px для 1-й колонки, 150px для 2-й и 250 для 3-й

 

(аналогично для решения можно использовать дополнительную разметку)

 

BZ1bD7DCMAAlx6B.png

 

Решение

 

http://jsbin.com/eBAjIZABI/2/edit

Выравнивание блоков с помощью абсолютного позиционирования

 

 

Задание: 

 

В квадратный контейнер произвольного размера помещены 9 блоков произвольной ширины и высоты.

 

Разметка  (каждый блок содержит внутри один вспомогательный контейнер)

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>Absolute positioning</title>    <style type="text/css">        .red {      background:red;      width:40px;      height:50px;    }    .orange {      width:50px;      height:30px;      background:orange;    }        .yellow {      width:70px;      height:50px;      background:yellow;    }        .lime {      width:70px;      height:30px;      background:lime;    }        .green {      width:50px;      height:70px;      background:green;    }        .cyan {      width:60px;      height:60px;      background:cyan;    }        .blue {      background:blue;      width:40px;      height:70px;    }        .magenta {      width:60px;      height:70px;      background:magenta;    }        .pink {      width:70px;      height:50px;      background:pink;    }  </style></head><body>  <div class="container">    <div class="wrapper red">    <div>    </div></div>      <div class="wrapper orange">    <div>    </div></div>         <div class="wrapper yellow">    <div>    </div></div>         <div class="wrapper lime">    <div>    </div></div>              <div class="wrapper green">    <div>    </div>  </div>    <div class="wrapper cyan">    <div>    </div>  </div>     <div class="wrapper blue">    <div>    </div>  </div> <div class="wrapper magenta">    <div>    </div>  </div> <div class="wrapper pink">    <div>    </div>  </div></div></body></html> 

 

Нужно, используя абсолютное позиционирование, разместить блоки по центру узлов сетки, делящей контейнер на 4 части по горизонтали и вертикали.

 

BZ8O3Z_CcAAdRaH.png

 

Решение

 

http://jsbin.com/iCikaPug/1/edit

 

 

Рисунок из плавающих блоков

 

Задание:

Дан контейнер с набором блоков со статическим позиционированием и float:left

 

Разметка

 

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>floats</title>    <style type="text/css">    .container>div {        float:left!important;   position:static!important;}  </style></head><body>  <div class="container">        <div class="a"></div>    <div class="b"></div>    <div class="c"></div>    <div class="d"></div>    <div class="e"></div>    <div class="f"></div>    <div class="g"></div>    <div class="h"></div>    <div class="i"></div>    <div class="j"></div>    <div class="k"></div>    <div class="l"></div>    <div class="m"></div>    <div class="n"></div>    <div class="o"></div>    <div class="p"></div>    </div></body></html>

 

Нужно, манипулируя шириной, высотой, отступами и свойством clear блоков, получить такое изображение

 

BZxlKj0CIAAUl3G.png

Решение

 

http://jsbin.com/eLAHUWe/1/edit

 

 

Трубопровод

 

 

Задание

 

Используя спрайт с изображением элементов трубопровода

http://comps.canstockphoto.com/can-stock-photo_csp2136532.jpg ,

нужно получить такое изображение:

 

BZ1O1WrCQAAHY0p.png

 

Решение

 

http://jsbin.com/ABAXUye/1/edit

 

 

Стрелка

 

 

Задание:

 

Изобразить стрелку из блоков

 

BZ1xJ9rCMAEq4RW.png

 

Решение

 

http://jsbin.com/OVOREwo/1/edit

 

 

Заголовки

 

 

Задание

 

Дана следующая разметка для заголовков от h1 до h6:

 

 <h1>Header 1        <span>Lorem Ipsum</span>    <span>Lorem Ipsum Dolor Sit Amet </span>     <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet </span>    <span>Lorem Ipsum</span>     </h1>    <h2>Header 2</h2>    <h3>Header 3     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>  </h3>      <h4>Header 4      <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet</span>    <div class="clear"></div>    <span>Lorem Ipsum Dolor Sit Amet</span>        <span>Lorem Ipsum</span>      </h4>      <h5>Header 5       <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet</span>    <div class="clear"></div>    <span>Lorem Ipsum Dolor Sit Amet</span>        <span>Lorem Ipsum</span>    </h5>    <h6><span>Header 6</span>    <span>Lorem Ipsum Dolor Sit Amet</span>   </h6>   

 

Нужно оформить заголовки таким образом:

 

testt.png

 

Решение

 

http://jsbin.com/ugOVanIL/2/edit

 

 

 

Соударяющиеся шарики

 

 

Задание:

 

Дано 4 шарика, выстроенных по горизонтали на одинаковом расстоянии друг от друга. 

Справа от шариков расположена стена.

 

Реализовать анимацию:

 

  1)  1 шарик двигается вправо, ударяет 2-й и останавливается.

  2)  После соударения 2-й шарик начинает двигаться вправо до соударения с 3-м, после чего останавливается

  3)  3-й и 4-й аналогично.

 

  4)  4-й шарик движется вправо до соударения со стеной, после чего возвращается, ударяя 3-й шарик справа, и останавливается.

 

  5)  3-й шарик после соударения движется влево до соударения со 2-м и останавливается.

  6)  2-й и первый аналогично.

 

  (после того, как 1-й шарик возвращается влево, все шарики стоят в исходной позиции и анимация заканчивается)

 

BZ7xDUhCMAE9l51.png

 

Решение

 

http://jsbin.com/AsuhODu/3/edit

 

 

Edited by terorama
Link to comment
Share on other sites
gvardi Explorer

gvardi

Posted
Posted (edited)

Текст подсказка.

 

 

Задание:

 

Сделать текст подсказку как показано на изображении ниже. Вывод текста из атрибута поможет сделать функция CSS3  attr() 

 

Требования:

 

- Сделать плавную анимацию появления, за исключением  Opera, Safari, IE<=9;

- Элементы пузырей сделать css3 свойствами.

- Выдать минимальное количество кода.

 

02d0aec53b.jpg

Рис. текст подсказка

 

Изображение облака - 1947014b0e.png

 

HTML разметка -           <a href="#" class="cloud-alt" alt='  ТУТ ТЕКСТ ПОДСКАЗКА  '><i></i>Я Вконтакте</a>

 

Решение -http://jsfiddle.net/4kTp9/6/

 

 

Edited by gvardi
Link to comment
Share on other sites
Kyokata Explorer

Kyokata

Posted
Posted (edited)

http://jsfiddle.net/4kTp9/

 

Обычно сервак работает. Походу у нас опять веерные отключения электричества :)

 

Шарик с тенью и рефлексами из обычного divа.

 

HTML:

<!DOCTYPE html><html lang="ru"><head><title>Просто шарик</title></head><body><div></div></body></html>

CSS:

body div{top:100px;width:150px;margin:0 auto;height:150px;background:-o-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:-moz-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:-webkit-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:-ms-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);position:relative;overflow:visible;padding:60px;border-radius: 50%;border:1px solid black;}body div:after{content:'';position:absolute;background:-moz-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:-o-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:-webkit-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:-ms-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));height:80px;bottom:0px;left:90px;width:300px;border-radius: 50%;z-index:-1;-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}

 

P.S. Спасибо за перенос поста, спросонья тему попутал :)

Edited by Kyokata
  • Like 1
Link to comment
Share on other sites
terorama Explorer

terorama

Posted
Posted (edited)

Адаптивный блок
 

 

Задание:

 

Изобразить блок, ширина и высота которого составляет 50% от ширины окна браузера 

 

BZ_Nr4zCYAArOJw.png

 

Решение

 

http://jsbin.com/oYaMEqOd/1/edit

 

 

 

Трехмерная таблица

 

 

Задание:

 

Дана таблица

 <table>    <tr><td>A</td><td>B</td><td>C</td></tr>    <tr><td>D</td><td>E</td><td>F</td></tr>    <tr><td>G</td><td>H</td><td>I</td></tr>  </table>

Нужно оформить ее таким образом

 

BZ_gLKOCQAEeYtc.png

 

Решение

 

http://jsbin.com/EKiBERaX/1/edit

 

 

Красная кнопка

 

 

Задание:

 

Нужно, используя CSS 3, нарисовать конструкцию, включающую кнопку и две створки.

В исходном состоянии створки повернуты на 45 градусов по часовой стрелке и закрывают кнопку.

 

По нажатию на конструкцию  реализуется анимация, состоящая из 2-х фаз:

 

1) Створки поворачиваются на 45 градусов против часовой стрелки (т.е. встают вертикально)

2) Створки раздвигаются соответственно влево и вправо, открывая кнопку.

 

При повторном нажатии створки возвращаются в исходное положение

 

testy.png

(символ коня ♘ )

 

Решение

 

http://jsbin.com/OPatoSoW/1/edit

 

 

Адаптивный слайдер 

 

 

Задание:

Реализовать слайдер, переключающийся при изменении ширины окна браузера.

 

Например:

 

  1.  Слайдер включает 6 изображений.

 

  2.  При ширине окна браузера более 900px слайдер показывает 1-е изображение

 

  3.  Если ширина окна браузера меньше 900px слайдер переключается на следующее изображение при изменении ширины на 50px. 

(то-есть 900-850px - 2 изображение 850-800 - 3-е, 800-750 - 4-е, 750-700 - 5-е 700-650 - 6-е)

 

  4. При ширине окна меньше  650px - слайдер показывает последнее изображение

 

 

testyy.png

 

Решение

 

http://jsbin.com/uqONuMu/1/edit

 

 

 

Высота колонок

 

 

Вариация классической задачи про колонки одинаковой высоты.

 

—————————————-

Базовая постановка задачи: 

Даны три колонки разного цвета.  Высота  колонок определяется контентом внутри.

Необходимо сделать все колонки по высоте равными самой высокой колонке.

equal-height-columns-problem.gif

 

Подробнее здесь: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

—————————————-

 

Задание

Реализовать следующую разметку:

BaFJKgYCUAAoOGK.png

1.  Верхняя часть состоит из 3-х колонок одинаковой ширины (равной 1/3 ширины экрана)

 

2.  В верхней части колонок расположены два блока (Lorem Ipsum) произвольной высоты, которые "толкают" содержимое колонок вниз.

 

3.  Первые 2 колонки содержат контент произвольной высоты.

Необходимо сделать высоту колонок одинаковой (по высоте колонки с наибольшим количеством контента)

 

4.  Под первыми 2-мя колонками расположен футер (зеленый). Высота футера зависит от контента в нем.

 

5.  Правая колонка (голубая) должна быть равна по высоте сумме высот 1-й колонки и футера.

 

6.  Нижняя часть состоит из 2-х колонок одинаковой ширины (равной половине ширины экрана)

Необходимо сделать высоту колонок одинаковой (по высоте колонки с наибольшим количеством контента)

 

Решение 
 
 

 

Разноцветная таблица 

 

 

Задание:

 

Нарисовать таблицу

 

BaFm2pyCMAASdS2.png

 

Решение

 

http://jsbin.com/ayizeBE/1/edit

 

 

Слайдер

 

 

Задание:

 

Реализовать без использования JavaScript слайдер с последовательным переключением изображений.

 

Слайдер может включать неограниченное количество слайдов.

Для навигации используется два управляющих элемента в виде стрелок по бокам.

 

По нажатию на стрелку вправо слайдер переключается на следующее изображение

По нажатию на стрелку влево слайдер возвращается на первое изображение.

 

BaF__38CUAE8lWm.png

Решение

 

http://jsbin.com/IGEcIvob/1/edit

 

 

Выпадающее меню

 

 

Задание:

 

Изобразить выпадающее меню.

 

Разметка 

 <ul class="root">    <li><a href="#">Home</a></li>    <li>      <input type="checkbox" name="z" />      <a href="#">Products</a>            <ul>        <li>          <input type="checkbox" name="z" />                    <a href="#">T-Shirts</a>                     <ul>             <li><a href="#">Type 1</a></li>             <li><a href="#">Type 2</a></li>             <li><a href="#">Type 3</a></li>             <li><a href="#">Type 4</a></li>           </ul>        </li>        <li><a href="#">Shirts</a></li>        <li><a href="#">Accessories</a></li>               </ul>     </li>    <li><a href="#">Stores</a></li>    <li><a href="#">Discounts</a></li>    <li><a href="#">Contacts us</a></li>  </ul> 

 

Меню работает без использования JavaScript.

 

Подменю открываются по щелчку мышью по стрелке рядом с соответствующим пунктом.

При повторном щелчке соответствующее подменю закрывается.

 

Подменю  открываются с анимацией:

Подменю 2-го уровня разворачивается сверху, (то-есть начальная высота блока 0)

Подменю 3-го уровня разворачивается слева  (начальная ширина блока 0)

 

BaGgoLuCYAA7MnV.png

 

Решение

 

http://jsbin.com/aQUPULa/1/edit

 

Edited by terorama
  • Like 1
Link to comment
Share on other sites
swandev Explorer

swandev

Posted
Posted (edited)

Горизонтальное меню

 

Задача:

Сверстать горизонтальное меню.

 

Исходная разметка:

<nav>    <ul>      <li>      <a href="#">        <span>Основное</span>      </a>    </li>    <li>      <a href="#">        <span>HTML</span>      </a>    </li>    <li>      <a href="#">        <span>CSS</span>      </a>    </li>    <li>      <a href="#">        <span>Сайт</span>      </a>    </li>    </ul>  </nav>

Необходимые изображения:

 

 HoUkTta.png   и  xsAf3Gh.png (можно сделать на CSS)

 

 

Скриншоты:

vQOaSQS.png

CASAr5I.png

aEEtxms.png

 

Результат:

 

http://jsfiddle.net/Alexey_swn/3RKcw/1/

FS http://jsfiddle.net/Alexey_swn/3RKcw/1/embedded/result/

Edited by ALEEX SWN
Link to comment
Share on other sites
swandev Explorer

swandev

Posted
Posted

@, почему три картинки, при каких условиях вид меню меняется? 

 

Кто делает задание с анимацией, рекомендую GIF добавить, это будет нагляднее всего.

Можно без картинок. Сделать все на CSS.

Вид меню не изменится.

Link to comment
Share on other sites
Kyokata Explorer

Kyokata

Posted
Posted

Kyokata, зачетный шарик )

PS: В jsfiddle не нужно вставлять элемент <body>.

Спасибо, буду знать :)

Действительно, правила применяются и без него, хтмл становится ещё меньше http://jsfiddle.net/4kTp9/9/

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept